<template>
    <div id="tmpl">
           <div id="cate">
               <ul v-bind="{style:'width:'+ulWidth+'px'}">
                   <li>全部</li>
                   <li v-for="item in cates">{{item.title}}</li>
                   
               </ul>
           </div>

           <div id="imglist"> 
               <ul>
                   <li v-for="item in list">
                       <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                       <!-- <img v-lazy="item.img_url"> -->
                       <img :src="item.url_img" alt="">
                       <div id="desc">
                           <h5 v-text="item.title"></h5>
                           <p v-text="item.zhaiyao"></p>
                       </div>
                       </router-link>
                   </li>
               </ul>
           </div>
    </div>
</template>

<script>

import {Toast} from 'mint-ui';

import con from '../../kits/common.js';

    export default {
        data(){
            return {
                ulWidth:320,
                cates:[],   //存储图片分类数组
                list:[
                    // {
                    //     "id":1,
                    //     "title":"国产嫩模",
                    //     "img_url":"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1554801105&di=202a0e0df7abe835b6c36a9dc4a8d435&src=http://img.zynews.cn/attachement/jpg/site2/20131224/00219761fd2014232b1c57.jpg",
                    //     "zhaiyao":"内容描述,内容描述,内容描述,内容描述,内容描述"
                    // },
                    // {
                    //     "id":1,
                    //     "title":"国产嫩模",
                    //     "img_url":"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1554801105&di=202a0e0df7abe835b6c36a9dc4a8d435&src=http://img.zynews.cn/attachement/jpg/site2/20131224/00219761fd2014232b1c57.jpg",
                    //     "zhaiyao":"内容描述,内容描述,内容描述,内容描述,内容描述"
                    // }
                ]     //存储图片数组
            }
        },
        created(){
            this.getcates();

            var all = 0; //获取所有数据
            this.getimages(all);
        },
        methods:{
            getimages(cateid){

                cateid  = cateid || 0;

                var url = con.base + "/api/getimages/"+cateid;

                this.$http.get(url).then(function(res){
                    if(res.body.status != 0){
                        Toast(res.body.message);
                        return;
                    }

                    this.list = res.body.message;
                })
            },
            getcates(){

                var url = con.base + "/api/getimgcategory";

                this.$http.get(url).then(function(res){
                    if(res.body.status !=0){
                        Toast(res.body.message);
                        return;
                    }

                    this.cates = res.body.message;
                    //定义单个宽度
                    var w = 62;
                    var count  = res.body.message.length +1;
                    this.ulWidth = w * count;

                })
            },
        }
    }
</script>

<style scoped>

    #cate{
        width: 375px;
        max-width: 375px;
        overflow-x: auto;
    }
    #cate ul{
        margin: 0px;
        
        padding-left: 10px;
    }
    #cate li{
        list-style: none;
        display: inline-block;
        color: #0094ff;
        font-size: 14px;
        padding-left: 6px;
    }

    #imglist{

    }

    #imglist ul{
        padding-left: 0px;
        
    }

    #imglist li{
        list-style: none;
        position: relative;
    }
    
    #imglist li img{
        width: 100%;
        height: 300px;
    }

    #desc{
        width: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        bottom: 2px;
        left: 0px;
        padding: 8px;
    }
    #desc h5{
        color: white;
        font-weight: bold;
    }

    #desc p{
        color: white;
        
    }
</style>

